package com.noocodecommit.wicket.jquery.plugin.ui.droppable;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.model.Model;

import com.noocodecommit.wicket.jquery.TemplatePage;
import com.noocodecommit.wicket.stuff.jquery.JQCore;
import com.noocodecommit.wicket.stuff.jquery.plugin.chili.JQChili;
import com.noocodecommit.wicket.stuff.jquery.plugin.ui.draggable.JQDraggable;
import com.noocodecommit.wicket.stuff.jquery.plugin.ui.draggable.JQDraggableOptions;
import com.noocodecommit.wicket.stuff.jquery.plugin.ui.draggable.JQDraggableUtils;
import com.noocodecommit.wicket.stuff.jquery.plugin.ui.draggable.OnDragStartBehavior;
import com.noocodecommit.wicket.stuff.jquery.plugin.ui.droppable.JQDroppable;
import com.noocodecommit.wicket.stuff.jquery.plugin.ui.droppable.JQDroppableUtils;
import com.noocodecommit.wicket.stuff.jquery.plugin.ui.droppable.OnDropBehavior;
import com.noocodecommit.wicket.stuff.jquery.plugin.ui.tabs.JQTabs;

public class DroppablePage extends TemplatePage
{

	private static final long serialVersionUID = 1L;
	private final JQTabs tabContainer;

	public DroppablePage()
	{
		super();
		JQCore.init(this);
		this.setupChili();

		tabContainer = new JQTabs("tab-container");
		tabContainer.setOutputMarkupId(true);
		add(tabContainer);

		/*************************************************************************************************************************************************************************************************************************************************
		 * Simple Droppable
		 ************************************************************************************************************************************************************************************************************************************************/
		JQDraggable drag0 = JQDraggableUtils.create("draggable0").helper(JQDraggableOptions.HELPER_CLONE).build();
		tabContainer.add(drag0);

		JQDroppable drop0 = JQDroppableUtils.create("droppable0").accept(drag0).build();
		tabContainer.add(drop0);

		/*************************************************************************************************************************************************************************************************************************************************
		 * Ajaxed Droppable
		 ************************************************************************************************************************************************************************************************************************************************/
		JQDraggable drag1 = JQDraggableUtils.create("draggable1").helper(JQDraggableOptions.HELPER_CLONE).revert(true).build();
		tabContainer.add(drag1);

		JQDroppable drop1 = JQDroppableUtils.create("droppable1").accept(drag1).build();
		tabContainer.add(drop1);

		final Label output1 = new Label("output1");
		output1.setOutputMarkupId(true);
		tabContainer.add(output1);

		drag1.add(new OnDragStartBehavior()
		{
			public void onStart(AjaxRequestTarget target)
			{
				output1.setModel(new Model("start drag"));
				target.addComponent(output1);
			}
		});

		drop1.add(new OnDropBehavior()
		{
			public void onDrop(AjaxRequestTarget target)
			{
				output1.setModel(new Model("dropped"));
				target.addComponent(output1);
			}
		});

		/*************************************************************************************************************************************************************************************************************************************************
		 * Ajaxed Droppable - Active Class with FADE OUT
		 ************************************************************************************************************************************************************************************************************************************************/
		JQDraggable drag21 = JQDraggableUtils.create("draggable2-1").helper(JQDraggableOptions.HELPER_CLONE).build();
		tabContainer.add(drag21);

		JQDraggable drag22 = JQDraggableUtils.create("draggable2-2").helper(JQDraggableOptions.HELPER_CLONE).build();
		tabContainer.add(drag22);

		JQDroppable drop2 = JQDroppableUtils.create("droppable2").accept(drag21).activeClass("drop-active").hoverClass("drop-hover").dropScript("ui.draggable.clone().fadeOut('fast', function() { $(this).fadeIn('fast') }).appendTo($(this).empty());")
				.build();
		tabContainer.add(drop2);

		final Label output2 = new Label("output2");
		output2.setOutputMarkupId(true);
		tabContainer.add(output2);

		drag21.add(new OnDragStartBehavior()
		{
			public void onStart(AjaxRequestTarget target)
			{
				String msg = String.format("start drag '%s'", this.getComponent().getMarkupId());
				output2.setModel(new Model(msg));
				target.addComponent(output2);
			}
		});

		drag22.add(new OnDragStartBehavior()
		{
			public void onStart(AjaxRequestTarget target)
			{
				String msg = String.format("start drag '%s'", this.getComponent().getMarkupId());
				output2.setModel(new Model(msg));
				target.addComponent(output2);
			}

		});

		drop2.add(new OnDropBehavior()
		{
			public void onDrop(AjaxRequestTarget target)
			{
				String msg = String.format("dropped '%s' in '%s'", ((JQDroppable) this.getComponent()).getLastDroppedDraggable().getMarkupId(), this.getComponent().getMarkupId());
				output2.setModel(new Model(msg));
				target.addComponent(output2);
			}
		});

		JQChili chili1 = new JQChili("chili1");
		add(chili1);
		this.bindChiliCode(chili1, this.getClass(), "html");

		JQChili chili2 = new JQChili("chili2");
		add(chili2);
		this.bindChiliCode(chili2, this.getClass(), "java");

		JQCore.get().bindOnDocumentReadyFunction();
	}
}
